<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
				list-style: none;
			}
			
			.swiper-box {
				width: 400px;
				height: 300px;
				margin: auto;
				overflow: hidden;
			}
			
			.swiper-box>ul {
				width: 2000px;
				/* transform: translate(-200px,0px); */
				transition: all 0.5s;
			}
			
			.swiper-item {
				width: 400px;
				height: 300px;
				background-size: cover;
				background-repeat: no-repeat;
				float: left;
			}
			
		</style>
	</head>
	<body>
		<section class="swiper-box">
			<ul>
			</ul>	
		</section>
	</body>
	<script>
		let array = [
			"http://127.0.0.1/static/images/001.png",
			"http://127.0.0.1/static/images/002.png",
			"http://127.0.0.1/static/images/003.png",
			"http://127.0.0.1/static/images/004.png"
		];
		
		let index = 0;
		
		let isCreated = false;
		
		// 多创建一个
		let lis
		
		let ul = document.querySelector(".swiper-box>ul");
		
		function swiperCreate() {
			if (!isCreated) {			
				for (let i = 0;i < array.length;i ++) {
					lis[i] = document.createElement("li");
					lis[i].classList.add("swiper-item");
					lis[i].style.backgroundImage = `url('${array[i]}')`;					
					ul.appendChild(lis[i]);
				}	
			}
			
		}
		
		function swiperStart() {
			swiperCreate();
			
			setInterval(() => {
				ul.style.transform = `translate(${-(index * 400)}px,0px)`;
				index ++;
				if (index == lis.length) {
					index = 0;
				}
			},3000)
		}
		
		swiperStart();
	</script>
</html>